<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wcl
 * @Date: 2023-11-21 16:54:39
 * @LastEditors: wcl
 * @LastEditTime: 2023-11-24 10:32:28
-->
<template>
  <div class="container">
    <a-space direction="vertical" style="width: 100%" :size="16">
      <a-card style="width: 100%" title="类目管理">
        <a-form :model="formState">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="类目名称">
                <a-input
                  style="width: 100%"
                  v-model:value="formState.searchCondition"
                  placeholder="输入类目名称"
                />
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="状态">
                <a-select
                  ref="select"
                  v-model:value="formState.state"
                  style="width: 100%"
                  placeholder="状态"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option :value="1">启用</a-select-option>
                  <a-select-option :value="2">禁用</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <div class="layout-flexSpace">
          <a-space wrap>
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </a-space>
          <a-space wrap>
            <a-button type="primary" @click="handelOpen('新增类目',{})"
              >新增类目</a-button
            >
          </a-space>
        </div>
      </a-card>

      <a-card>
        <a-table
          :dataSource="dataSource"
          :columns="notifyColumns"
          :pagination="pagination"
          @change="handleChangeSize"
        >
          <template #bodyCell="{ column, record }">
            <template  v-if="column.key === 'coverPic'">
               <a-image :src="record.coverPic" width="100" height="100px"></a-image>
            </template>
            <template  v-if="column.key === 'sampleGraph'">
                <template v-if="record.sampleGraph">
                    <span v-for="(item,index) in JSON.parse(record.sampleGraph)">{{ item.label }} <span v-show="index < JSON.parse(record.sampleGraph).length-1">/</span></span>
                </template>
            </template>
            <template  v-if="column.key === 'parameters'">
                <template v-if="record.parameters">
                    <span v-for="(item,index) in JSON.parse(record.parameters)">{{ item.title }}<span v-show="index < JSON.parse(record.parameters).length-1">/</span></span>
                </template>
            </template>
            <template  v-if="column.key === 'state'">
                {{record.state === 1 ? '启用' : '禁用'}}
            </template>
            <template v-if="column.key === 'operate'">
              <a-space>
                <a-button type="primary" @click="handelOpen('编辑类目', record)"
                  >编辑</a-button
                >
                <a-button type="primary" @click="handelSampleGraph(record)">示例图管理</a-button>
                <a-button type="primary" @click="handelParameters(record)">参数管理</a-button>
                <a-button type="primary" @click="handelcategory(record)"
                  >子类目</a-button
                >
                <a-popconfirm
                  :title="`您是否要${
                    record.state == 1 ? '禁用' : '启用'
                  }此条数据?`"
                  @confirm="handleStateChange(record)"
                >
                  <a-button v-if="record.state == 1" danger type="primary"
                    >禁用</a-button
                  >
                  <a-button v-else type="primary">启用</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-space>
    <addCategory ref="categoryRef" @refreshList="refreshList" />
    <categoryAdmin ref="categoryAdminRef"  @refreshList="refreshList" />
    <exampleAdmin ref="exampleRef" @refreshList="refreshList" />
    <paramsAdmin ref="paramsRef" @refreshList="refreshList" />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { notifyColumns } from "./columns.js";
import addCategory from "./categoryModule/addCategory.vue";
import exampleAdmin from './categoryModule/sample/exampleAdmin.vue'
import categoryAdmin from "./categoryModule/category/categoryAdmin.vue";
import paramsAdmin from './categoryModule/parameters/paramsAdmin.vue'
import { catalogList, catalogUpdateState } from "@/api/goodConfig.js";
import { message } from "ant-design-vue";
const pagination = ref({
  current: 1,
  pageSize: 10,
  defaultPageSize: 10,
  total: 0,
  showSizeChanger: true,
  pageSizeOptions: ["10", "20", "50", "100"],
  showTotal: (total) => `共 ${total} 条`,
});
const formState = ref({
  page: pagination.value.current,
  pageSize: pagination.value.pageSize,
  categoryId: undefined,
  subCategoryId: undefined,
  searchCondition: undefined,
  status: undefined,
});
const categoryRef = ref(null);
const exampleRef = ref(null); //示例图管理
const paramsRef = ref(null); //参数管理
const categoryAdminRef = ref(null); //子类目管理
const dataSource = ref([]);
function handleSearch() {
  formState.value.page = 1
  formState.value.pageSize = 10
  getCatalogList();
}

const handelOpen = (titles,record) => {
  categoryRef.value.open(titles,record);
};
// 示例图
const handelSampleGraph = (record) => {
    exampleRef.value.open(record);
};
// 参数
const handelParameters = (record) => {
    paramsRef.value.open(record);
};
const handelcategory = (record) => {
  categoryAdminRef.value.open(record);
};
function handleReset() {
  formState.value = {
    page: 1,
    pageSize: 10,
    categoryId: undefined,
    subCategoryId: undefined,
    searchCondition: undefined,
    status: undefined,
  };
  pagination.value.current = 1
  pagination.value.pageSize = 10
  getCatalogList();
}

function handleChangeSize(page) {
  formState.value.page = page.current;
  formState.value.pageSize = page.pageSize;
  pagination.value.current = page.current;
  pagination.value.pageSize = page.pageSize;
  getCatalogList();
}
// 获取列表
const getCatalogList = async () => {
  const data = await catalogList(formState.value);
  if (data.code === 200) {
    dataSource.value = data.data.list;
    pagination.value.total = data.data.total;
  }
};
// 禁用启用
// 禁用
function handleStateChange(row) {
  catalogUpdateState({ id: row.id, state: row.state == 1 ? 2 : 1 }).then(
    (res) => {
      if (res.code === 200) {
        message.success(`${row.state == 1?'禁用成功':'启用成功'}`);
        getCatalogList();
      }
    }
  );
}
// 刷新
function refreshList() {
    getCatalogList()
}
onMounted(() => {
  getCatalogList();
});
</script>

<style lang="less">
.img-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  .img-label {
    margin-top: 6px;
    color: #9599a5;
    font-size: 12px;
  }
}
</style>
